<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="店名" prop="multi_store">
        <el-input disabled v-model="ruleForm.multi_store"></el-input>
      </el-form-item>
      <el-form-item label="取餐时间" prop="qucan">
        <el-input disabled v-model="ruleForm.qucan"></el-input>
      </el-form-item>
      <el-form-item>
        <el-table style="margin: 0px" :show-header="false" :data="tableData">
          <el-table-column prop="gname"> </el-table-column>
          <el-table-column prop="quantity">
            <template #default="scope">
              {{ "x" + scope.row.quantity }}
            </template>
          </el-table-column>
          <el-table-column prop="price">
            <template #default="scope">
              {{ "￥" + scope.row.price }}
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="支付方式" prop="pay_mode">
        <el-radio-group v-model="ruleForm.pay_mode">
          <el-radio label="微信支付"></el-radio>
          <el-radio label="支付宝支付"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="备注">
        <el-input
          type="textarea"
          v-model="ruleForm.postscript"
          style="height: 50px"
        ></el-input>
      </el-form-item>

      <el-form-item>
        合计: {{ "￥" + this.data.price }}

        <el-button
          style="float: right"
          type="primary"
          @click="submitForm('ruleForm')"
          >付款</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      CId: this.$store.state.CId,
      ruleForm: {
        id: 0,
        multi_store: "奶奶不泡茶(学士路店)",
        created_time: new Date(),
        address: "在店",
        phonenumber: "xxxxxxxxxxx",
        user_name: "xxx",
        amount: this.data.price,
        pay_mode: "",
        DDstatus_id: 1,
        postscript: "无",
        quid: "",
        qucan: "立即用餐",
      },
      rules: {
        pay_mode: [
          { required: true, message: "请选择支付方式", trigger: "change" },
        ],
      },
      tableData: [],
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios({
            method: "post",
            url: "DDmanage/CartZhan",
            params: { id: this.data.cid },
            data: this.ruleForm,
          })
            .then((res) => {
              if (res.data.code > 0) {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                });

                this.$emit("update:dialogVisible", false);
                
                this.$store.state.CId = 0;
                this.$store.state.Count = 0;

                this.$emit("refresh");
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "error",
                });
              }
            })
            .catch((err) => {
              console.log("err: ", err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  props: {
    dialogVisible: Boolean,
    data: Object,
  },
  created() {
    this.axios({
      method: "get",
      url: "CartDetail/CX",
      params: { id: this.data.cid },
    })
      .then((res) => {
        this.tableData = res.data;
      })
      .catch((err) => {
        console.log("err: ", err);
      });
  },
};
</script>

<style scoped>
</style>